<template>
    <el-row>
        <el-col :span="8" :offset="8">
            <el-card shadow="never">
                <el-row style="margin-left:  -20px;margin-right:  -20px;margin-top:  -20px;">
                    <el-col :span="10" style="color: #5195f1;margin-top: 30px;border-left: 3px solid #5195f1;padding-left: 30px;margin-bottom: 36px;height: 30px;line-height: 30px;font-size: 24px;">注册</el-col>
                </el-row>
                <el-form :model="register">
                    <el-form-item label="手机号">
                        <el-input type="text" v-model="register.phone" :maxlength="11" suffix-icon="el-icon-mobile-phone" placeholder="请输入手机号" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码">
                        <el-input type="text" v-model="register.phoneCode" placeholder="请输入验证码" auto-complete="off">
                            <span slot="suffix" @click="getPhoneCaptcha" style="cursor:pointer">{{register.captchaTxt}}</span>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="text" v-model="register.password" placeholder="请输入密码" suffix-icon="el-icon-view" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名">
                        <el-input type="text" v-model="register.nickname" placeholder="请输入用户名" suffix-icon="el-icon-message" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" style="width: 100%" @click="goRegister">注册</el-button>
                    </el-form-item>
                </el-form>
                <el-row style="color:#515151">
                    <el-col :span="10" :offset="14" style="text-align: right">
                        <span @click="goLogin" style="cursor: pointer;">已有账号，去登录</span>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
export default {
    layout: "public",
    data() {
        return {
            register: {
                phone: "",
                password: "",
                phoneCode: "",
                phoneCodeUuid: "",
                nickname: "",
                captchaTxt: "发送验证码"
            },
            wxUserToken: "",
            agent: true
        };
    },
    // async asyncData({ app, redirect }) {
    //     let wxUserToken = app.$cookies.get('wxUserToken');
    //     return {
    //         wxUserToken
    //     };
    // },
    // mounted() {
    //     this.agent = this.isAgent();
    //     if (!this.agent && !this.wxUserToken) {
    //         this.goLogin();
    //     }
    // },
    methods: {
        async goLogin() {
            this.$router.push("/public/login");
        },
        async getPhoneCaptcha() {
            if (!this.register.phone) {
                this.$message.error("请输手机号");
                return;
            }
            if (this.register.phone.length !== 11) {
                this.$message.error("手机号输入有误");
                return;
            }

            if (typeof this.register.captchaTxt === "number") {
                return;
            }
            let i = 1;
            this.register.captchaTxt = 60;
            let captcha_interval = setInterval(() => {
                this.register.captchaTxt -= i;
                if (this.register.captchaTxt === 0) {
                    clearInterval(captcha_interval);
                    this.register.captchaTxt = "发送验证码";
                }
            }, 1000);

            const code = await this.$axios.$post(
                "/api/app/home/public/sendSmsCode",
                {
                    phone: this.register.phone
                }
            );
            if (code && code.errmsg === "ok") {
                this.register.phoneCodeUuid = code.data.uuid;
            } else {
                clearInterval(captcha_interval);
                this.register.captchaTxt = "发送验证码";
            }
        },

        async goRegister() {
            if (!this.register.phone) {
                this.$message.error("请输手机号");
                return;
            }
            if (this.register.phone.length !== 11) {
                this.$message.error("手机号输入有误");
                return;
            }

            if (!this.register.password) {
                this.$message.error("请输入密码");
                return;
            }

            if (!this.register.nickname) {
                this.$message.error("请输入用户名");
                return;
            }

            if (!this.register.phoneCode) {
                this.$message.error("请输入短信验证码");
                return;
            }

            this.$axios.setHeader("wxUserToken", this.wxUserToken);
            const register = await this.$axios.$post(
                "/api/app/home/public/register",
                {
                    phone: this.register.phone,
                    password: this.register.password,
                    nickname: this.register.nickname,
                    phoneCode: this.register.phoneCode,
                    phoneCodeUuid: this.register.phoneCodeUuid
                }
            );
            if (register && register.errmsg === "ok") {
                this.$cookies.set("guide", true, {
                    path: "/",
                    domain: this.getCoryright(),
                    maxAge: 60 * 10
                });
                this.$cookies.set("Token", register.data, {
                    path: "/",
                    domain: this.getCoryright(),
                    maxAge: 60 * 60 * 24 * 7
                });
                this.$message.success("注册成功");
                this.$router.push("/public/login");
            }
        },

        switchPwdType() {
            if (this.register.passwordType === "text") {
                this.register.passwordType = "password";
            } else {
                this.register.passwordType = "text";
            }
        }
    }
};
</script>
